<template>

  <div>
    <el-form :model="user" status-icon :rules="loginRules" ref="ruleForm" label-width="600px"
             class="demo-ruleForm">
      <el-form-item>
        <el-row>
          登录页面
        </el-row>
      </el-form-item>
      <el-form-item label="账号" prop="uname">
        <el-input  v-model="user.uname" autocomplete="off" style="width: 300px" prefix-icon="el-icon-user-solid"
                   placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input type="password" v-model="user.pwd" autocomplete="off" style="width: 300px" show-password
                  placeholder="请输入密码"  prefix-icon="el-icon-lock"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="yzm">
        <el-input  v-model="yzm" autocomplete="off" style="width: 300px" prefix-icon="el-icon-user-solid"
                   placeholder="请输入验证码不可为空"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loginUser">提交</el-button>
        <el-button @click="reSet">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "UserLogin",
        data(){
          return {
            user:{},
            yzm:"",
            loginRules:{

            }
          }
        },
      methods:{
        loginUser:function () {
          if (this.yzm!=""){
            axios.post("http://localhost:8080/users/tologin/"+this.user.uname+"/"+this.user.pwd).then((res)=>{
              if (res.data!=""){
                sessionStorage.setItem("uname",JSON.stringify(this.user.uname));
                this.$router.push('UserList');
              }else{
                alert("用户名或密码错误")
              }
            })

          }else{
            alert("验证码不可为空")
          }
        },
        reSet:function () {
          this.$refs['ruleForm'].resetFields();
        }
      }
    }
</script>

<style scoped>

</style>
